import React, { Component } from 'react';
import { Row, Col, Button } from 'antd';
import BaseForm from '../BaseForm/BaseForm.jsx';

class QueryToolBar extends Component {
  getDefaultOpt = () => {
    return (
      <Row style={{textAlign: 'right'}}>
        <Button type="primary" style={{ margin: '0 5px' }} onClick={() => {this.BaseForm.handleSubmit()}}>查询</Button>
        <Button onClick={() => {this.BaseForm.reset()}}>重置</Button>
      </Row>
    );
  }
  getLayout = () => {
    const { extra = {}, showOptBtn } = this.props;
    let { contentWrap = 20, optWrap = 4 } = extra;
    if (showOptBtn) {
      contentWrap = 24;
      optWrap = 0;
    }
    return {
      contentWrap,
      optWrap,
    };
  }
  render() {
    const { extra, ...rest } = this.props;
    const { contentWrap, optWrap } = this.getLayout();
    return (
      <Row>
        <Col span={contentWrap}>
          <BaseForm {...rest} wrappedComponentRef={form => this.BaseForm = form}></BaseForm>
        </Col>
        {optWrap ? (
          <Col span={optWrap}>
            {this.getDefaultOpt()}
          </Col>
        ) : (null)}
      </Row>
    );
  }
}

export default QueryToolBar;